import React, { useEffect, useState } from 'react'
import { Steps, Button, message } from 'antd';
import Setting from './components/setting';
import Preview from './components/preview';
import Outcome from './components/outcome';
import MineOut from './components/mineOut';
import DownLoad from './components/download'
import DownloadMine from './components/downloadMine';
import style from './index.css';
import { connect } from 'dva';
import router from 'umi/router'

const { Step } = Steps;

const theProps = (state) => {
    return {
        taskStatus: state.task.taskStatus,
        scale: state.task.scale,
        mapsInfo: state.maps.mapsInfo,
        initCurrent: state.task.current,
        id: state.maps.mapsId
    }
}

function Task(props) {
    const { dispatch, scale, mapsInfo, taskStatus, initCurrent, id } = props;
    const [outcomeType, setoutType] = useState(1)
    useEffect(() => {
        let tempNum = props.location.search?.slice(-1)
        setoutType(tempNum)
    }, [props.location])
    const steps = [
        {
            title: '处理设置',
            content: <Setting />,
        },
        {
            title: '效果预览',
            content: <Preview />,
        },
        {
            title: '处理结果',
            content: outcomeType == 1 ? <Outcome /> : <MineOut />,
        },
        {
            title: '分析报表',
            content: outcomeType == 1 ? <DownLoad /> : <DownloadMine />,
        },
    ];

    const [current, setCurrent] = React.useState(initCurrent);

    const next = () => {
        setCurrent(current + 1);
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const startTask = () => {
        dispatch({
            type: 'task/startGapTask',
            payload: {
                pictureId: id,
                path: mapsInfo[0].maps.path,
            }
        })
        setoutType(1)
        setCurrent(current + 1);
    }

    const startMineralTask = () => {
        dispatch({
            type: 'task/startMineTask',
            payload: {
                pictureId: id,
                path: mapsInfo[0].maps.path,
            }
        })
        setoutType(2)
        setCurrent(current + 1);
    }
    return (
        <div className={style.task}>
            <Steps current={current}>
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>
            <div className={style.stepscontent}>{steps[current].content}</div>
            <div className="steps-action">
                {current > 0 && (
                    <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                        上一步
                    </Button>
                )}
                {current === 0 && (
                    <>
                        <Button type="primary" style={{ marginRight: '80px' }} onClick={() => {
                            startMineralTask()
                            next()
                        }}>
                            矿物
                        </Button>
                        <Button type="primary" style={{ marginLeft: '80px' }} onClick={() => {
                            startTask()
                            next()
                        }}>
                            孔缝
                        </Button>

                    </>
                )}
                {(current === 1 || current === 2) && (
                    <Button type="primary"
                        //disabled={taskStatus === 2 ? false : true} 
                        onClick={() => {
                            next()
                        }}>
                        下一步
                    </Button>
                )}
                {current === steps.length - 1 && (
                    <Button type="primary" onClick={() => {
                        message.success('Processing complete!')
                        router.push({
                            pathname: '/work/sample',
                        })
                    }}>
                        完成
                    </Button>
                )}

            </div>
        </div>
    )
}

export default connect(theProps, null)(Task)